<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('用户管理')"></head>
</head>
<body>
<div class="x-body">
    <form class="layui-form layui-form-pane" style="margin-left: 20px;">
        <div style="width:100%;height:400px;overflow: auto;">
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">基础信息</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <label for="userAccount" class="layui-form-label">
                    <span class="x-red">*</span>账户
                </label>
                <div class="layui-input-inline">
                    <input type="hidden" name="userId" id="userId" th:value="${id}"/>
                    <input type="text"  id="userAccount" name="userAccount"  lay-verify="userAccount"
                           autocomplete="off" class="layui-input" />
                </div>
                <div id="ms" class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span><span id="ums">将会成为您唯一的登入名</span>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="userName" class="layui-form-label">
                        <span class="x-red">*</span>姓名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="userName" name="userName" lay-verify="userName"  autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="userMobile" class="layui-form-label">
                        <span class="x-red">*</span>手机
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="userMobile" name="userMobile"  lay-verify="phone"
                               autocomplete="off" class="layui-input"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="female" class="layui-form-label">
                        <span class="x-red">*</span>性别
                    </label>
                    <div class="layui-input-inline">
                            <input type="radio" name="userSex" value="01" title="男" />
                            <input type="radio" id="female" name="userSex" value="02" title="女" checked="true" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="status" class="layui-form-label">
                        <span class="x-red">*</span>状态
                    </label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="status" id="status" lay-skin="switch"
                               lay-text="正常|停用" lay-filter="statusDemo" checked="true"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>角色选择</label>
                <div class="layui-input-block" id="roles">

                </div>
            </div>
            <div style="height: 60px"></div>
        </div>
        <span th:if="${param.detail == null}">
            <div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6;
                    position: fixed;bottom: 1px;margin-left:-20px;">
                <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
                    <button  class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="">
                        保存
                    </button>
                    <button  class="layui-btn layui-btn-primary" id="close">
                        取消
                    </button>
                </div>
            </div>
        </span>
    </form>
</div>
<script th:inline="javascript">/*<![CDATA[*/
    var flag,msg;
    $(function(){
        $('#userAccount').on("blur",function(){
            var userAccount=$('#userAccount').val();
            userAccount = userAccount.trim();
            if(userAccount.match(/[\u4e00-\u9fa5]/)){
                return;
            }
            if(!/(.+){3,12}$/.test(userAccount)){
                return;
            }
            if(userAccount != '') {
                var url =  /*[[@{/system/user/checkUser}]]*/ "/system/user/checkUser";
                url += "?userAccount=" + userAccount;
                var userId = $("#userId").val();
                if(userId){
                    url += "&userId=" + userId;
                }

                $.ajax({
                    url: url, async: false, type: 'get', success: function (data) {
                        flag = data.flag;
                        $('#ms').find('span').remove();
                        if (!data.flag) {
                            msg = data.msg;
                            $('#ms').append("<span style='color: red;'>"+data.msg+"</span>");
                        }else{
                            flag=true;
                            $('#ms').append("<span style='color: green;'>用户名可用</span>");
                        }
                    },beforeSend:function(){
                        $('#ms').find('span').remove();
                        $('#ms').append("<span>验证ing</span>");
                    }
                });
            }
        });
    });
    layui.use(['form','layer'], function(){
        var id = [[${id}]] , roleIds = [];
        if(id){
            flag = true;
            var entityUrl =  /*[[@{/system/user/}]]*/ "/system/user/";
            entityUrl += id + "/object";
            $.ajax({url: entityUrl, async: false, type: 'post', dataType:"json",
                success: function (data) {
                    $("#userAccount").val(data.userAccount).attr("readonly", true);
                    $("#userName").val(data.userName);
                    $("#userMobile").val(data.userMobile);
                    if("09" == data.userStatus){
                        $("#status").removeAttr("checked");
                    }
                    $("input[name='userSex']").each(function(){
                        if( $(this).val() == data.userSex ){
                            $(this).attr("checked", true);
                        }else {
                            $(this).removeAttr("checked");
                        }
                    })
                    roleIds = data.roleIds.split(",");
                }
            });
        }

        $ = layui.jquery;
        var form = layui.form  ,layer = layui.layer;
        //自定义验证规则
        form.verify({
            userAccount: function(value){
                if(value.trim()==""){
                    return "账户不能为空";
                }
                if(value.match(/[\u4e00-\u9fa5]/)){
                    return "账户不能有中文";
                }
                if(!/(.+){3,12}$/.test(value)){
                    return "账户必须3到12位";
                }
                if(typeof(flag)=='undefined'){
                    return "账户验证ing";
                }
                if(!flag){
                    return msg;
                }
            }
            , userName: function(value) {
                if (value.trim() == "") {
                    return "姓名不能为空";
                }
            }
        });

        $('#close').click(function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
        //监听提交
        form.on('submit(add)', function(data){
            var r=document.getElementsByName("role");
            var role=[];
            for(var i=0;i<r.length;i++){
                if(r[i].checked){
                    role.push(r[i].value);
                }
            }

            if(role.length == 0){
                layuiUtils.toastMsg({content: "请至少选择一个角色!",icon:'fail', anim:'fail'});
                return false;
            }

            if(data.field.status == 'on'){
                data.field.userStatus = '01';
            }else {
                data.field.userStatus = '09';
            }
            data.field.roleIds=role.join(",");
            var url =  /*[[@{/system/user/saveUser}]]*/ "/system/user/saveUser";
            layerAjax(url, data.field, 'userList');
            return false;
        });
        var rolesUrl =  /*[[@{/system/role/allRoles}]]*/ "/system/role/allRoles";
        $.ajax({url: rolesUrl, async: false, type: 'post', dataType:"json",
            success: function (data) {
                var html = "";
                for(var i = 0; i < data.length; i++){
                    var item = data[i];
                    var flag =  false;
                    for(var j in roleIds){
                        if(item.roleId == roleIds[j]){
                            flag = true;
                            break;
                        }
                    }
                    html += "<input type=\"checkbox\" name=\"role\" title=\"" + item.roleName
                            + "\" lay-filter=\"check\" value='" + item.roleId + "' "
                            +  (flag ? " checked='true'" : "") + "/>";
                }
                $("#roles").html(html);
            }
        });
        form.render();
    });
/*]]>*/</script>
</body>
</html>